import React, { Component } from 'react';
import './main.css';

const TimelineMax =  new window.TimelineMax();
let animation;
class Line extends Component {
  componentDidMount() {
    animation = TimelineMax.to(".green", 1, {x:750})
                        .to(".blue", 1, {x:750})
                        .to(".orange", 1, {x:750});
    animation.pause();
  }
  
  playAnimation = () => {
    animation.play();
  }

  render() {
    return (
      <div>
        <h3>如果要使用<code>gsap</code>的链式动画，需要使用<code>TimelineMax</code></h3>
        <div style={{ marginBottom: 20 }}><code>{`TimelineMax.to(".green", 1, {x:750}).to(".blue", 1, {x:750}).to(".orange", 1, {x:750});`}</code></div>
        <div className="box green"></div>
        <div className="box blue"></div>
        <div className="box orange"></div>
        <div className="btns">
          <button className="btn" onClick={this.playAnimation}>play</button>
        </div>
      </div>
    );
  }
}

export default Line;